<!-- 意见反馈 -->
<template>
	<view class="xpadding">
		<view class="baseW feedback-text">
			<textarea maxlength="250" class="comment-info" placeholder="请填写反馈内容..." v-model="feedBack" @input="conInput" />
			<view class="text-num">{{num}} / 250</view>
		</view>
		<view class="baseW feedback-img">
			<view class="pre-title u-f-ac">
				<view>上传截图</view>
				<view>（最多上传3张）</view>
			</view>
			<view>
				<upload-image @myEvens="getImages" :startList="listImg"></upload-image>
			</view>
		</view>
		<button type="primary" form-type="submit" style="background-color: #2ba4f7;" @click="save">确定</button>
	</view>
</template>

<script>
	import uploadImage from '@/components/upload-image/upload-image.vue'
	
	export default {
		components:{
			uploadImage
		},
		data() {
			return {
				num: 0, //记录字数
				flag: true,//防止重复提交
				feedBack: '',//反馈文本内容
				listImg: [],//反馈图片列表
			}
		},
		methods: {
			//字数变动
			conInput() {
				this.num = this.feedBack.trim().length
			},
			//选取图片
			getImages(imgs) {
				this.listImg = imgs
			},
			//提交
			save() {
				//防止重复点击
				if (!this.flag) return this.$tip.toast('手速太快了,悠着点~');
				this.flag = false;
				//反馈内容不能为空
				if(!this.feedBack) return this.$tip.toast('请输入反馈内容');
				//整合数据
				let formdata = {
					busiId: this.$store.state.userInfo.id,
					busiName: this.$store.state.userInfo.busiName,
					feedBack: this.feedBack,
					photoUrl: JSON.stringify(this.listImg)
				};
				//请求接口
				this.$http.post('/api/auth/business/feedBack/add', formdata).then(res => {
					setTimeout(() => {
						this.flag = true
					},1500);
					this.$tip.successBack(res,1500,1)
				}).catch(err => {
					this.flag = true;
					this.$tip.toast('提交失败，请稍后再试')
				});
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.u-f-ac{
		display: flex;
		align-content: center;
	}
	
	.baseW{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}
	
	.xpadding {
		padding: 20rpx 28rpx;
	}
	
	.feedback-text {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.comment-info {
		font-size: 24rpx;
		width: 100%;
		height: 320rpx;
	}
	
	.text-num {
		text-align: right;
		color: #ccc;
		font-size: 24rpx;
	}
	
	.feedback-img {
		padding-bottom: 20rpx;
	}
	
	.pre-title {
		padding: 30upx 0;
	}
	
	.pre-title>view:last-child {
		font-size: 24rpx;
		color: #ccc;
	}
	
	
	image {
		width: 130rpx;
		height: 130rpx;
		margin-bottom: 30rpx;
	}
	
	.submitBtn{
		background-color: #2ba4f7;
	}
</style>
